<template>
  <van-nav-bar
    title="订单结算"
    fixed
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="payment-wrap">
    <div class="pay-first">
      <div class="pay-on">
        <van-field
          style="
            font-size: 18px;
            padding: 0;
            font-weight: 600;
            border-bottom: 0;
          "
          clickable
          readonly
          label="取餐时间"
          v-model="appointValue"
          placeholder="我已到店   >"
          @click="showPicker = true"
        />
        <van-popup :show="showPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
      </div>
      <div class="pay-tw">
        <h2>用餐方式</h2>
        <div class="pay-tw-conyent">
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio checked-color="#e50055" name="1">打包带走</van-radio>
            <van-radio checked-color="#e50055" name="0">店内用餐</van-radio>
          </van-radio-group>
          <p class="advice">为了您和家人的健康，建议选择打包带走</p>
        </div>
      </div>
    </div>
    <div class="pay-second">
      <h2>商品明细</h2>
      <div class="pay-th" v-for="(item, index) in foodsList" :key="index">
        <div class="pay-th-content">
          <p class="title">{{ item.title }}</p>
          <span>{{
            item.sugar ? item.temp + "/" + item.sugar : item.temp
          }}</span>
        </div>
        <p class="food-count">x{{ item.count }}</p>
        <p class="food-price">￥{{ item.price }}</p>
      </div>
      <div class="pay-fo">
        <p class="p1">优惠券</p>
        <p class="p2">暂无可用</p>
      </div>
      <div class="pay-fi">
        <p>
          共计{{ foodsList.length }}件商品，小计:
          <span>￥{{ totalprice }}</span>
        </p>
      </div>
    </div>
    <div class="pay-third">
      <h1>备注</h1>
    </div>
    <div class="pay-footer">
      <van-tabbar fixed>
        <p>￥{{ totalprice }}</p>
        <van-button
          class="van-btn"
          color="#e50055"
          text="去支付"
          @click="show1()"
        />
        <van-overlay :show="show" @click="show = false">
          <div class="block">
            <p>请使用微信扫一扫支付</p>
            <div class="qrcode">
              <QrcodeVue :value="payUrl" :size="qrcodesize" level="H" />
            </div>
          </div>
        </van-overlay>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import QrcodeVue from "qrcode.vue";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      appointValue: "",
      showPicker: false,
      columns: [
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
      ],
      radio: "1",
      uid: "",
      totalprice: "",
      foodsList: [],
      foodsDetail: {},
      add_time: "",
      show: false,
      payUrl: "世间所有的美好都会如期而至",
      qrcodesize: 256,
    });
    const onClickLeft = () => {
      window.sessionStorage.setItem("isPay", false);
      history.back();
    };
    const onConfirm = (value) => {
      // console.log(value);
      state.appointValue = value;
      state.showPicker = false;
    };

    //以时间获取订单戳
    const getOrderCode = () => {
      // 时间戳
      var time = new Date();
      // 年
      var year = String(time.getFullYear());
      // 月
      var mouth = String(time.getMonth() + 1);
      if (mouth.length < 2) {
        mouth = "0" + mouth;
      }
      // 日
      var day = String(time.getDate());
      if (day.length < 2) {
        day = "0" + day;
      }
      // 时
      var hours = String(time.getHours());
      if (hours.length < 2) {
        hours = "0" + hours;
      }
      // 分
      var minutes = String(time.getMinutes());
      if (minutes.length < 2) {
        minutes = "0" + minutes;
      }
      // 秒
      var seconds = String(time.getSeconds());
      if (seconds.length < 2) {
        seconds = "0" + seconds;
      }
      state.add_time =
        year +
        "-" +
        mouth +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      window.localStorage.setItem(
        "add_time",
        JSON.parse(JSON.stringify(state.add_time))
      );
      var str = "DD" + minutes + year + seconds + hours + day + mouth;
      return str;
    };

    const show1 = () => {
      var goods_code = "";
      if (window.localStorage.getItem("goods_code")) {
        goods_code = localStorage.getItem("goods_code");
        // console.log(goods_code);
        goods_code = parseInt(goods_code);
        goods_code++;
      } else {
        goods_code = 1;
      }
      localStorage.setItem("goods_code", goods_code);
      localStorage.setItem("order_code", getOrderCode());
      localStorage.setItem("appointValue", state.appointValue);
      state.show = true;
      setTimeout(() => {
        sessionStorage.setItem("isPay", true);
        state.show = false;
        Toast.success("支付成功");
        setTimeout(() => {
          router.push({
            path: "/take",
          });
        }, 500);
      }, 3000);
    };
    onMounted(() => {
      state.foodsList = eval(
        "(" + window.localStorage.getItem("shopCart") + ")"
      );
      state.uid = JSON.parse(window.localStorage.getItem("userinfo")).uid;
      state.totalprice = window.localStorage.getItem("totalprice");
    });
    return {
      ...toRefs(state),
      onClickLeft,
      onConfirm,
      getOrderCode,
      show1,
    };
  },
  components: {
    QrcodeVue,
  },
};
</script>

<style lang="less" scoped>
.payment-wrap {
  .pay-first {
    margin-top: 50px;
    padding: 3px 12px;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 10px;
    .pay-on {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f3f3f3;
      padding: 13px 0;
    }
    .pay-tw {
      display: flex;
      justify-content: space-between;
      padding: 13px 0;
      h2 {
        font-size: 18px;
      }
      .pay-tw-conyent {
        display: flex;
        flex-direction: column;
        .advice {
          font-size: 10px;
          color: #f6b343;
          margin: 15px 0;
        }
      }
    }
  }
  .pay-second {
    border: 1px solid #f3f3f3;
    margin: 10px;
    border-radius: 5px;
    padding: 3px 12px;
    h2 {
      font-size: 18px;
      margin: 0;
    }
    .pay-th {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f3f3f3;
      padding: 13px 0;
      align-items: center;
      .pay-th-content {
        display: flex;
        flex-direction: column;
        .title {
          margin: 0;
          font-size: 15px;
        }
        span {
          font-size: 10px;
          transform: scale(0.9);
          color: #999999;
        }
      }
      .food-count {
        color: #898989;
        font-size: 10px;
      }
      .food-price {
        margin: 0;
        color: #535353;
      }
    }
    .pay-fo {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f3f3f3;
      .p1 {
        margin: 0;
        color: #535353;
        line-height: 48px;
        font-size: 20px;
      }
      .p2 {
        margin: 0;
        color: #898989;
        font-size: 15px;
        line-height: 48px;
      }
    }
    .pay-fi {
      p {
        margin: 5px 0;
        font-size: 16px;
      }
    }
  }
  .pay-third {
    border: 1px solid #f3f3f3;
    margin: 10px;
    border-radius: 5px;
    padding: 15px 12px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 56px;
    h1 {
      color: #999999;
      font-size: 15px;
    }
  }
  .pay-footer {
    .van-btn {
      margin-right: 20px;
    }
    .block {
      p {
        margin-top: 150px;
        text-align: center;
      }
      .qrcode {
        display: block;
        text-align: center;
      }
    }
  }
}
</style>
<style>
.van-radio__label {
  font-size: 12px;
}
.van-tabbar {
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.van-tabbar P {
  color: #e50055;
  font-size: 20px;
  font-weight: 600;
}
</style>